<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <div id="div1" class="divs div1" name="abc" data-main="ac"></div>
    <input type="checkbox" checked="checked">
    <input type="checkbox" checked="checked" abc=20>
    <input type="checkbox" checked="checked" abc=30>
    <input type="checkbox" checked="checked">
    <input type="checkbox" checked="checked">



    <script>


        // 标签属性： 标签上表明的属性  
        // 标签属性分为默认标签属性和自定义标签属性
        // 自定义属性的命名和值必须使用小写和横线连接

      
        // DOM的对象属性也分为默认属性和自定义属性
        // 自定义属性的属性命名和值必须使用小写的横线连接

        // DOM的对象属性和标签属性 不一定相同，也不一定可以互相获取
        // DOM中的自定义属性和标签自定义属性是完全不能互相调用


        // 有些标签默认属性可以通过DOM属性调用
        // title id  src href alt placeholder type value 等等
        // class标签属性DOM属性调用是className
        // console.log(div.className)

        // 先有标签，才可以渲染对象调用，也可以通过DOM对象设置标签的属性来达到重新渲染
        // 添加属性值不会造成重绘，但添加标签会造成重绘

        // check是标签属性check的对象映射属性

// ---------------------------------------------------------------------------------------------
        init();
      function init(){
        var inputs=Array.from(document.querySelectorAll("input"));
         inputs.forEach(function(item,index){
            item.data={a:index};
            item.addEventListener("click",clickHandler)
         })
      }

      function clickHandler(e){
        console.log(this.data);
      }

    //   this就是上方的date，具有相同的属性

// ----------------------------------------------------------------------------------------------------------


            var input=document.querySelector("[abc='30']");
            console.log(input);
    


    // DOM对象.setAttribute("标签名","标签属性值")              添加标签属性
    // DOM对象.removeAttribute("标签名");//删除标签属性
    // DOM对象.getAttribute("标签名");//根据标签属性名获取值






    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    </script>
</body>
</html>